import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_module/style/colors.dart';

import 'image_detail_page.dart';

class ImagePage extends StatefulWidget {
  List<String> imgList = [];
  int? maxCount;

  ///传入maxCount 则会限制 最大图片展示数量
  ImagePage(this.imgList, this.maxCount);

  ImagePage.imgList(this.imgList);

  @override
  _ImagePageState createState() => _ImagePageState(imgList, maxCount);
}

class _ImagePageState extends State<ImagePage> {
  List<String> imgList = [];
  int? maxCount;

  _ImagePageState(this.imgList, this.maxCount);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        shrinkWrap: true,
        itemCount: (maxCount != null && (imgList.length >= maxCount!))
            ? imgList.length
            : imgList.length + 1,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          childAspectRatio: 1,
        ),
        itemBuilder: (cxt, index) {
          if (index == imgList.length) {
            return _emptyAdd();
          } else {
            return _ImagePageDel(index);
          }
        });
  }

  _emptyAdd() {
    return Container(
      child: InkWell(
        onTap: () {
          imgList.add("https://picsum.photos/id/${imgList.length}/400/200");
          setState(() {});
        },
        child: Container(
          alignment: Alignment.center,
          child: Image.asset(
            "images/service_provider/service_provider_add_img.png",
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  _ImagePageDel(int index) {
    return Stack(
      alignment: AlignmentDirectional.topStart,
      children: <Widget>[
        GestureDetector(
          child: Hero(
            child: ClipRRect(
                borderRadius: BorderRadius.circular(5),
                child: SizedBox(
                  width: 300.0,
                  height: 300.0,
                  child: Image.network(
                    imgList[index],
                    fit: BoxFit.cover,
                  ),
                )),
            tag: imgList[index],
          ),
          onTap: () {
            Navigator.of(context).push(
                PageRouteBuilder(pageBuilder: (ctx, animation, animation2) {
              return FadeTransition(
                opacity: animation,
                child: ImageDetailPage(imgList[index]),
              );
            }));
          },
        ),
        Positioned(
          right: 0,
          width: 21.0,
          height: 21.0,
          child: GestureDetector(
            child: ClipRRect(
              borderRadius: BorderRadius.only(topRight: Radius.circular(5)),
              child: Image.asset(
                "images/service_provider/service_provider_case_delete.png",
                fit: BoxFit.cover,
              ),
            ),
            onTap: () {
              imgList.removeAt(index);
              setState(() {});
            },
          ),
        ),
      ],
    );
  }
}
